<template>
    <div class="order">
        <breadcrumb :routerList="routerList"></breadcrumb>
        <div class="box">
            <el-row type="flex" :gutter="20">
                <el-col :span="22">
                    <el-row type="flex" :gutter="15">
                        <el-col :span="6">
                            <el-date-picker
                                    v-model="timeVal"
                                    type="daterange"
                                    align="right"
                                    unlink-panels
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    :picker-options="pickerOptions"
                                    @change="pickTime"
                            >
                            </el-date-picker>
                        </el-col>
                        <el-col :span="4">
                            <el-input v-model="phone" placeholder="请输入电话号码" clearable></el-input>
                        </el-col>
                        <el-col :span="4">
                            <el-input v-model="fx_user_shop_id" placeholder="请输入店铺Id" clearable></el-input>
                        </el-col>
                        <el-col :span="4" v-if="$store.state.system_type == 1">
                            <el-select v-model="supplier" clearable placeholder="请选择供货商" @change="supplierChange"  >
                                <el-option
                                        v-for="item in supplier_list"
                                        :key="item.id"
                                        :label="item.supplier_name"
                                        :value="item.id"
                                >
                                </el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="2" >
                            <el-button type="primary" @click="searchBtn" icon="el-icon-search">检索</el-button>
                        </el-col>
                    </el-row>
                </el-col>

                <el-col :span="2" :offset="2">
                    <el-button type="primary" @click="exportExcel" icon="el-icon-download">导出</el-button>
                </el-col>
            </el-row>
        </div>
        <div class="table">
            <el-table
                    :data="orderList"
                    style="width: 100%"
                    :row-style="{cursor:'pointer'}"
                    row-key="id"
                    border
                    :height="getWinHeight"
                    highlight-current-row
                    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                <el-table-column
                        prop="order_num"
                        label="订单编号"
                        width="160">
                </el-table-column>
                <el-table-column
                        label="商品信息"
                        width="300"
                >
                    <template scope="scope">
                        <div v-for="(item,index) in scope.row.content" :key="index" class="product-info">
                            <div class="info-img"><img :src="item.attr_list.img" alt="" ></div>
                            <div class="info-content">
                                <p>商品名称：{{item.product_name}} {{item.attr_list.properties}}</p>
                                <p>商品单价：¥{{item.attr_list.price}}</p>
                                <p>购买数量：{{item.num}} </p>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="price"
                        width="100"
                        label="订单价格"
                >
                </el-table-column>
                <el-table-column
                        label="收货信息"
                        width="300"
                >
                    <template scope="scope">
                        <p>{{scope.row.name}}   <span style="margin-left: 15px;">{{scope.row.phone}}</span></p>
                        <p>地址：{{scope.row.sheng+scope.row.shi+scope.row.qu+scope.row.address}}</p>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="createtime"
                        label="下单时间"
                        width="140">
                    <template scope="scope">
                        <span>{{$util.timeStampToTime(scope.row.createtime)}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="是否分销"
                        width="80"
                >
                    <template scope="scope">
                        <el-tag size="mini" effect="plain" type="info" v-if="scope.row.is_fx==0">平台</el-tag>
                        <el-tag size="mini" effect="plain" type="danger" v-if="scope.row.is_fx==1">分销</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        label="分销小店"
                        width="200"
                >
                    <template scope="scope">
                        <p v-if="scope.row.user_shop_content"><img :src="scope.row.user_shop_content.head_img" class="shop-img" alt="">{{scope.row.user_shop_content.shop_name}}</p>
                        <p v-else>--</p>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="status"
                        label="退款状态">
                    <template scope="scope">
                        <el-tag size="mini" v-if="scope.row.tk_status == 0" type="info" effect="dark">待审核</el-tag>
                        <el-tag size="mini" v-if="scope.row.tk_status == 1" type="warning" effect="dark">已退款</el-tag>
                        <el-tag size="mini" v-if="scope.row.tk_status == 2" type="primary" effect="dark">已拒绝</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="退款金额" prop="tk_price"></el-table-column>
                <el-table-column
                        label="操作"
                        width="200"
                >
                    <template scope="scope">
                        <el-button @click="toCheck(scope.$index,scope.row)" size="mini">查看</el-button>
                        <el-button @click="redund(scope.$index,scope.row)" size="mini" v-if="scope.row.tk_status == 0">退款</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- <paginationAre :total="total" @currentChange="currentChange"></paginationAre> -->
        <el-row type="flex" :gutter="20">
            <el-col :span="4" class="total-price">合计订单金额：<span>{{totalPrice}} 元</span></el-col>
            <el-col :span="20">
                <paginationSizeChange :total="total" @sizeChange="sizeChange" @currentPage="currentPage"></paginationSizeChange>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import breadcrumb from '@/components/breadcrumb.vue'
    // import paginationAre from '@/components/paginationAre.vue'
    import paginationSizeChange from '@/components/paginationSizeChange.vue'
    export default {
        name: "order",
        components:{breadcrumb,paginationSizeChange},
        data(){
            return {
                express:'',
                express_num:'',
                routerList:[
                    {
                        path:'',
                        name:'订单管理'
                    },
                    {
                        path:'/redund_list',
                        name:'退货退款列表'
                    },
                ],
                timeVal:'',
                timeArr:[],
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                    ,
                    disabledDate(time){
                        return time.getTime()>Date.now()
                    }
                },
                orderList:[],
                total:0,
                supplier:'',
                supplier_id:'',
                status:5,
                statusLabel:'',
                page:1,
                pageNum:this.$store.state.pageNum,
                supplier_list:[],
                phone:'',
                fx_user_shop_id:'',
                totalPrice:0


            }
        },
        beforeCreate(){

        },
        created(){
            this.supplier_id = this.$store.state.supplier_id;
            if(this.$route.query.status != undefined){
                this.status = this.$route.query.status
            }
            for(let i in this.statusList){
                if(this.status == this.statusList[i].value){
                    this.statusLabel = this.statusList[i].label;
                }
            }
            if(this.$route.query.fx_id){
                this.fx_user_shop_id = this.$route.query.fx_id
            }
            this.getSupplierList()
            this.getOrderList()
        },
        computed:{
            getWinHeight(){
                let winHeight = document.body.clientHeight;
                return winHeight - 260
            }
        },
        methods:{
            async getOrderList(){
                let res = await this.$Http.getOrder({
                    supplier_id:this.supplier_id,
                    status:this.status,
                    start_time:this.timeArr[0],
                    end_time:this.timeArr[1],
                    phone:this.phone,
                    fx_user_shop_id:this.fx_user_shop_id,
                    p:this.page,
                    num:this.pageNum
                })
                console.log(res);
                let total_price = 0;
                for(let i in res.list){
                    total_price += parseFloat(res.list[i].price)
                }
                this.totalPrice = total_price;
                this.orderList = res.list;
                this.total = Number(res.count);
            },
            async getSupplierList(){
                let res = await this.$Http.getSupplier()
                this.supplier_list = res.list;
            },
            async operationRedund(tk_status,order_id){
                let res = await this.$Http.operationRedund({
                    tk_status:tk_status,
                    order_id:order_id
                })
                console.log(res)
                if(res.code == 200){
                    if(tk_status == 1){
                        this.$message.success('退款申请已同！')
                    }
                    if(tk_status== 2){
                        this.$message.info('退款申请已拒绝！')
                    }
                    this.getOrderList();
                }
            },
            statusChange(value){
                this.status = value
            },
            supplierChange(value){
                this.supplier_id = value
            },
            searchBtn(){
                this.getOrderList();
            },
            toCheck(index,row){
                console.log(index)
                this.$router.push({
                    path: '/supplier_order_detail',
                    query: {
                        id: row.id
                    }
                })
            },
            pickTime(){
                let timeArr = []
                console.log(this.timeVal)
                for(let i in this.timeVal){
                    let time = this.timeVal[i];
                    let year = time.getFullYear();
                    let month = this.$util.checkTime(time.getMonth() + 1);
                    let day = this.$util.checkTime(time.getDate());
                    let stamp = '';
                    if(i == 0){
                        stamp = this.$util.timeToTimestamp(`${year}-${month}-${day} 00:00:00`);
                        timeArr.push(stamp)
                    }
                    if(i == 1){
                        stamp = this.$util.timeToTimestamp(`${year}-${month}-${day} 23:59:59`);
                        timeArr.push(stamp)
                    }
                }
                this.timeArr = timeArr
            },
            currentChange(currentPage){
                this.page = currentPage
                this.getOrderList()
            },
            //分页条数设置
            sizeChange(val){
                this.pageNum = val;
                this.getOrderList()
            },
            //分页页数
            currentPage(val){
                this.page = val;
                this.getOrderList()
            },
            //导出表格
            exportExcel(){
                console.log('导出表格');
                this.exportExcelFun()
            },
            //导出表格方法
            async exportExcelFun(){
                let letter = [   'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
                let tableheader = ['订单号','商品名称','商品单价','购买数量','订单价格','收货人','电话','地址','下单时间','是否分销','小店名称','退款状态','退款金额'];
                let data = [];
                let pro = '订单列表';
                let list = this.orderList;
                for(let i in list){
                    let arr = [];
                    let product_name = '';
                    let price = "";
                    let num = ""
                    for(let j in list[i].content){
                        product_name += `  ${list[i].content[j].product_name}`
                        price += `  ${list[i].content[j].attr_list.price}`
                        num += `  ${list[i].content[j].num}`
                    }
                    let address = list[i].sheng + list[i].shi + list[i].qu +list[i].address;
                    let time = this.$util.timeStampToTime(list[i].createtime)
                    let fx = list[i].is_fx == 0?'平台':'分销';
                    let fx_name = list[i].user_shop_content?list[i].user_shop_content.shop_name:'平台'
                    let status = list[i].tk_status == 0?'待退款':(list[i].status == 1?'已退款':(list[i].status == 2?'已拒绝':'其他'))
                    arr.push(list[i].order_num,product_name,price,num,list[i].price,list[i].name,list[i].phone,address,time,fx,fx_name,status,list[i].tk_price)
                    data.push(arr);
                }
                console.log(data)
                // console.log(JSON.stringify(data))
                let res = await this.$Http.exportExcelFun({
                    letter:letter,
                    tableheader:tableheader,
                    data:JSON.stringify(data),
                    pro:pro
                })
                console.log(res)
                if(res){
                    window.location.href = "https://yx.tfnhg.com/add_excel?id="+res
                }
            },
            redund(index,row){
                console.log(index,row);
                let tk_status = 0;
                this.$confirm(`订单编号：${row.order_num}，原因：${row.tk_content}，申请退款：${row.tk_price}元`, '退款申请', {
                    distinguishCancelAndClose: true,
                    confirmButtonText: '同意',
                    cancelButtonText: '拒绝'
                })
                    .then(() => {
                        console.log('同意')
                        tk_status = 1;
                        this.operationRedund(tk_status,row.id)
                    })
                    .catch(action => {
                        if(action==='cancel'){
                            console.log('拒绝')
                            tk_status = 2;
                            this.operationRedund(tk_status,row.id)
                        }else{
                            console.log('取消')
                        }
                    });

            }
        }
    }
</script>

<style scoped>
    .box{
        width: 100%;
        height: 60px;
        background: white;
        margin: 20px 0;
        padding: 10px 10px;
        box-sizing: border-box;
        color:#aaa;
    }
    .msg-div{
        width: 100%;
        font-size: 12px;
        color:#aaa;
        margin-top: 10px;
    }
    .shop-img{
        margin-right: 15px;
        width: 30px;
        height:30px;
        vertical-align: middle;
        border-radius: 50%;
    }
    .product-info{
        width: 100%;
        display: flex;
        flex-flow:row nowrap;
        align-items: center;
        border-bottom:1px dotted #aaa;
    }
    .product-info:last-child{
        border:none;
    }
    .info-img{
        width: 80px;
    }
    .info-img img{
        width: 100%;
    }
    .info-content{
        font-size: 12px;
        flex:1;
        padding:0 5px;
        box-sizing: border-box;
    }
    .info-content p{
        line-height: 20px;
        margin-bottom:5px;
        margin-top: 0;
    }
    .total-price{
        font-size: 14px;
        color:#888;
        line-height: 50px;
    }
    .total-price span{
        font-size: 18px;
        font-weight: blod;
        color:#E6A23C;
    }
    .el-date-editor--daterange.el-input__inner{
        width:100%;
    }
</style>

